﻿@page "/animation"

<h1>Animating the modal</h1>

<hr class="mb-5" />

<p>
    By default, the modal is shown without animation. The modal can be set to no animation, Fade in, Fade out or both.
</p>

<div class="card mb-4">
    <h5 class="card-header">Setting on a per modal basis</h5>
    <div class="card-body">
        <p class="card-text">
            <code>
                @("var options = new ModalOptions() { Animation = ModalAnimation.FadeIn(2) };")
                <br />
                @("Modal.Show<Confirm>(\"Animation: Fade-In\", options);")
            </code>
        </p>
    </div>
</div>

<div class="card mb-4">
    <h5 class="card-header">Setting globally for all modals</h5>
    <div class="card-body">
        <p class="card-text">
            <code>
                @("<BlazoredModal Animation=\"@ModalAnimation.FadeIn(2)\"/> ")
            </code>
        </p>
    </div>
</div>

<input type="number" @bind-value="@duration" />

<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeIn(duration)))" class="btn btn-secondary">Fade-In</button>
<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeOut(duration)))" class="btn btn-secondary">Fade-Out</button>
<button @onclick="AnimationDefault" class="btn btn-primary">Globally set value (default no animation)</button>
<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeInOut(duration)))" class="btn btn-secondary">Fade-in Fade-Out</button>

<p>
    It is also possible to have multiple modals (like in the Multiple Modals example) with different animations. With the below modal, the first modal will only fade-in with a duration of 2 seconds. The second modal will fade-in and fade-out in 5.0 seconds.
</p>

<button @onclick="@MultipleModals" class="btn btn-primary">Multiple Modals</button>

@code {

    [CascadingParameter] public IModalService Modal { get; set; }

    private double duration = 1.0;

    void AnimationDefault()
    {
        Modal.Show<Confirm>("Default Animation");
    }

    void AnimationCustom(ModalAnimation animation)
    {
        var options = new ModalOptions { Animation = animation };

        Modal.Show<Confirm>($"Animation: {animation.Type}", options);
    }

    void MultipleModals()
    {
        var options = new ModalOptions
        {
            Animation = ModalAnimation.FadeIn(2)
        };

        Modal.Show<YesNoPromptAnimation>("Multiple Modals", options);
    }
}